import {DatePicker, NavBar} from "antd-mobile";
import './index.scss'
import {useEffect, useState} from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import {useSelector} from "react-redux";
import {useMemo} from "react";
import _ from 'lodash'
import DailyBill from "./components/DailyBill";
const Month = () => {
    // 控制时间picker是否显示
    const [dateVisible,setDateVisible] = useState(false)
    // 时间显示
    const [currentDate,setCurrentDate] = useState(()=>{
        return dayjs().format('YYYY-MM')
    })
    // 每月收支显示
    const [currentMonthList,setMonthList] = useState([])
    // 计算某个月的账单
    const monthResult = useMemo(()=>{
        const pay = currentMonthList.filter(item=>item.type==='pay').reduce((a,c)=>a+c.money,0)
        const income = currentMonthList.filter(item=>item.type==='income').reduce((a,c)=>a+c.money,0)
        return {
            pay,
            income,
            total:pay + income
        }
    },[currentMonthList])
    // 选择日期的回调
    const onConfirm = (date) => {
        const formatDate = dayjs(date).format('YYYY-MM')
        setCurrentDate(formatDate)
        setMonthList(monthGroup[formatDate]||[])
        setDateVisible(false)
    }
    // 从仓库获取数据
    const billList = useSelector(state => state.bill.billList)
    // 相当于计算属性，对账单列表以月份进行分组
    const monthGroup = useMemo(()=>{
        return  _.groupBy(billList,(item)=> dayjs(item.date).format('YYYY-MM'))
    },[billList])
    // 初始化的时候把当前月的统计数据显示
    useEffect(()=>{
        const nowDate = dayjs().format('YYYY-MM')
        setMonthList(monthGroup[nowDate]||[])
    },[monthGroup])

    //当前月按照日来做分组
    // 相当于计算属性，对账单列表以日进行分组
    const dayGroup = useMemo(()=>{
        const groupDate = _.groupBy(currentMonthList,(item)=> dayjs(item.date).format('YYYY-MM-DD'))
        const keys = Object.keys(groupDate)
        return {
            groupDate,
            keys
        }
    },[currentMonthList])
    return (
        <div className="monthlyBill">
            <NavBar className="nav" backArrow={false}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date" onClick={()=>setDateVisible(true)}>
                        <span className="text" >{currentDate}月份账单</span>
                        {/*箭头*/}
                        <span className={classNames('arrow',dateVisible && 'expand')}></span>
                     </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{monthResult.pay.toFixed(2)}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.income.toFixed(2)}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.total.toFixed(2)}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/* 时间选择器 */}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="month"
                        visible={dateVisible}
                        max={new Date()}
                        onCancel = {()=> setDateVisible(false)}
                        onConfirm ={(date)=>onConfirm(date)}
                        onClose = {()=>setDateVisible(false)}
                    />
                </div>

                {dayGroup.keys.map(key =>
                    <DailyBill date={key} billList={dayGroup.groupDate[key]} key={key}></DailyBill>
                )}
            </div>
        </div >
    )
}
export default  Month
